<template>
  <div class="mr-4 w-48 border-r border-[rgba(255,255,255,.3)]">
    <div class="mr-2 flex h-10 items-center justify-between">
      <h3 class="module-title mb-0 mr-7">监测列表</h3>
    </div>
    <Tree
      :tree-data="treeData"
      :selected-keys="[selectTreeKeys]"
      :field-names="{ key: 'id', title: 'structureName' }"
      defaultExpandAll
      v-if="treeData.length"
    >
      <template #title="scope">
        <span @click="() => handleSelectStructure(scope)">{{
          scope.structureName
        }}</span>
      </template>
    </Tree>
  </div>
</template>

<script setup lang="tsx">
import { onMounted, ref } from 'vue';
import { Tree } from 'ant-design-vue';
import { fetchStructureTree } from './api';

const props = defineProps({
  tableRef: {
    type: Object,
    default: () => {},
  },
});

const selectTreeKeys = defineModel('selectTreeKeys');

const treeData = ref([]);
onMounted(() => {
  fetchStructureTree().then((res) => {
    treeData.value = res.data;
  });
});

let params: Record<string, any> = {};
const handleSelectStructure = (scope) => {
  console.log(scope);

  const { monitoringType, id } = scope;
  params = {};
  if (id === selectTreeKeys.value) {
    selectTreeKeys.value = undefined;
  } else {
    selectTreeKeys.value = id;
    switch (monitoringType) {
      case '1':
        params.netId = id;
        break;
      case '2':
        params.regionId = id;
        break;
      case '3':
        params.structureId = id;
        break;
    }
  }

  props.tableRef?.refresh();
};
</script>

<style lang="scss" scoped></style>
